import mountElement from './mountElement'
import updateNodeElement from './updateNodeElement'

export default function createDOMElement (virtualDOM){
    let newElement = null

    if(virtualDOM.type === 'text') {
        // 文本节点
        newElement = document.createTextNode(virtualDOM.props.textContent)
    }else{
        // 元素节点
        newElement = document.createElement(virtualDOM.type)
        // 渲染节点属性
        updateNodeElement(newElement, virtualDOM)
    }

    // 在dom元素上记录virtualDOM 将 Virtual DOM 挂载到真实 DOM 对象的属性中 方便在对比时获取其 Virtual DOM
    newElement._virtualDOM = virtualDOM

    // 递归创建子节点
    virtualDOM.children.forEach(child => {
        // 为什么不直接用 mountNativeElement 来转换呢？ 因为不确定子节点是否是组件节点或元素节点
        mountElement(child, newElement)
    })

    return newElement 
}